<template>
  <a-modal v-model:visible="visible" title="导入" @ok="handleOk" :footer="null">
    <div><a-button type="link" @click="downloadTemplate('人员导入模板.xlsx')">下载模板</a-button></div>
    <div style="padding: 10px 0"><a-radio-group :options="options" v-model:value="role" /></div>
    <a-upload
      v-model:file-list="fileList"
      name="file"
      :multiple="true"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :customRequest="customRequest"
      :showUploadList="false"
    >
      <a-button>
        <upload-outlined></upload-outlined>
        上传文件
      </a-button>
    </a-upload>
  </a-modal>
</template>
<script setup>
  import { ref, reactive } from 'vue';
  import { employeeApi } from '/@/api/system/employee-api';
  import { message } from 'ant-design-vue';
  import axios from 'axios';
  // import file from '/@/assets/template/人员导入模板.xlsx'
  defineExpose({
    showModal,
  });
  const visible = ref(false);
  const fileList = ref([]);
  const options = [
    { label: '学校人事', value: '学校人事' },
    { label: '机关人事', value: '机关人事' },
  ];
  function showModal() {
    visible.value = true;
  }
  function onClose() {
    visible.value = false;
  }
  const role = ref('学校人事');
  const customRequest = (options) => {
    const formData = new FormData();
    formData.append('file', options.file);
    formData.append('role', role.value);
    employeeApi.uploadEmployee(formData).then((res) => {
      if (res.code === 0) {
        message.success('导入成功');
        onClose();
      }
    });
  };
  function downloadTemplate(name) {
    let link = document.createElement('a'); // 创建下载的实体标签
    link.href = name; // 创建下载的链接
    link.download = name; // 下载的文件名
    link.click(); // 执行下载
    link.remove();
  }
  function handleOk() {
    onClose();
  }
</script>
<style scoped></style>
